<template>
	<view class="form-main">
		<view class="form-column">
			<view class="form-title">窗口授权表</view>
			<view class="form-box">
				<u-form :model="form" ref="uForm" :error-type="['message']">
					<u-form-item label="院区:" label-width="90rpx" prop="deptName" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="yqShow" @click="yqShow = true" placeholder="请选择院区" v-model="form.deptName" />
						</view>
						<u-select v-model="yqShow" mode="single-column" :list="yqList" value-name="id" label-name="name" @confirm="onConfirmType1"></u-select>
					</u-form-item>
					<u-form-item label="日期:" label-width="90rpx" prop="sqDate" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="dateShow" @click="dateShow = true" placeholder="请选择日期" v-model="form.sqDate" />
						</view>
						<u-picker v-model="dateShow" mode="time" @confirm="onConfirmType2"></u-picker>
					</u-form-item>
					<u-form-item label="窗口接待总人数:" label-width="230rpx" prop="ckJdZrs" required>
						<u-input class="form-input" v-model="form.ckJdZrs" type="number" placeholder="请输入窗口接待总人数"/>
					</u-form-item>
					<u-form-item label="授权人数:" label-width="140rpx" prop="sqRs" required>
						<u-input class="form-input" v-model="form.sqRs" type="number" placeholder="请输入授权人数"/>
					</u-form-item>
					<u-form-item label="窗口办理手术险人数:" label-width="290rpx" prop="ckBlSsxRs" required>
						<u-input class="form-input" v-model="form.ckBlSsxRs" type="number" placeholder="请输入窗口办理手术险人数"/>
					</u-form-item>
					<u-form-item label="窗口办理住院险人数:" label-width="290rpx" prop="ckBlZyxRs" required>
						<u-input class="form-input" v-model="form.ckBlZyxRs" type="number" placeholder="请输入窗口办理住院险人数"/>
					</u-form-item>
					<u-form-item label="拒绝签字人数:" label-width="200rpx" prop="jjQzRs" required>
						<u-input class="form-input" v-model="form.jjQzRs" type="number" placeholder="请输入拒绝签字人数"/>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="u-margin-top-30" @click="submitAction">
			<animate-button ref="animeBtn" btn-text="提交"></animate-button>
		</view>
		<u-gap height="100"></u-gap>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				type: null,
				yqShow: false,
				yqList: [
					// {
					// 	id: 1,
					// 	name: '院区一'
					// },
					// {
					// 	id: 2,
					// 	name: '院区二'
					// }
				],
				dateShow: false,
				form: {
					deptId: '',
					deptName: '',
					sqDate: '',
					ckJdZrs: '',
					sqRs: '',
					ckBlSsxRs: '',
					ckBlZyxRs: '',
					jjQzRs: '',
				},
				rules: {
					deptName: [
						{
							required: true,
							message: '请选择院区！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					sqDate: [
						{
							required: true,
							message: '请选择日期！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					ckJdZrs: [
						{
							required: true,
							message: '请输入窗口接待总人数！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					sqRs: [
						{
							required: true,
							message: '请输入授权人数！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					ckBlSsxRs: [
						{
							required: true,
							message: '请输入窗口办理手术险人数！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					ckBlZyxRs: [
						{
							required: true,
							message: '请输入窗口办理住院险人数！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					jjQzRs: [
						{
							required: true,
							message: '请输入拒绝签字人数！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					]
				},
			};
		},
		methods: {
			getDetail(id) {
				this.$api.ckDetails({
					id
				}).then(res => {
					let d = res.data
					this.id = d.id
					this.form = {
						deptId: d.deptId,
						deptName: d.deptName,
						sqDate: d.sqDate,
						ckJdZrs: d.ckJdZrs,
						sqRs: d.sqRs,
						ckBlSsxRs: d.ckBlSsxRs,
						ckBlZyxRs: d.ckBlZyxRs,
						jjQzRs: d.jjQzRs,
					}
					this.$refs.uForm.setRules(this.rules);
				})
			},
			getDepList() {
				this.$api.deptList({
					current: 1,
					size: 999
				}).then(res => {
					let data = res.data
					for (let i of data.records) {
						this.yqList.push({
							name: i.deptName,
							id: i.deptId
						})
					}
				})
			},
			onConfirmType1(item) {
				this.form.deptId = item[0].value
				this.form.deptName = item[0].label
			},
			onConfirmType2(item) {
				this.form.sqDate = `${item.year}-${item.month}-${item.day}`
			},
			submitAction() {
				if (this.$refs.animeBtn.status != 1) return
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.animeBtn.loading()
						let params = this.type == 0 ? { id: 0, remark: '' } : { id: this.id }
						this.$api.ckAddOrUpdate({
							...this.form,
							...params,
						}).then(res => {
							this.$refs.animeBtn.success()
							this.$refs.uToast.show({
								title: '上传成功',
								type: 'success',
								back: true,
								duration: 1500,
								callback: () => {
									this.$fallback(1, 
										{
											key: 'reset',
										},
									)
								}
							});
						}).catch(() => {
							this.$refs.animeBtn.fail()
							setTimeout(()=> {
								this.$refs.animeBtn.reset()
							}, 3000)
						})
					} else {
						return
					}
				});
			},
		},
		onLoad() {
			const {
				type,
				id
			} = this.$Route.query;
			this.id = id;
			this.type = type;
			if (type == 1) {
				this.getDetail(id)
			} else {
				this.form.sqDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			}
			uni.setNavigationBarTitle({
				title: type == 0 ? '窗口授权表上传' : '窗口授权表编辑'
			})
			this.getDepList();
		},
		onReady() {
			if (this.type != 1) {
				this.$refs.uForm.setRules(this.rules);
			}
		}
	}
</script>

<style>
	.select-box{
		width: 100%;
	}
</style>